<template>
  <div class="rightThree">
    <div>
      <moduleTitle :name="title"></moduleTitle>
    </div>
    <div class="two-echarts">
      <div class="left">
        <div class="leftImg" v-show="isShow">
          <img src="@/assets/newDashboard/正常.png" alt="" />
          <div class="text">
            <div style="margin-bottom: 0.1504vw;">正常</div>
            <div>
              <span class="num">{{ this.echartData.useCount * 1 + 1 }}</span
              >个
            </div>
          </div>
        </div>
        <div class="leftImg" style="margin-top: 1.0417vw;" v-show="isShow">
          <img src="@/assets/newDashboard/异常.png" alt="" />
          <div class="text">
            <div style="margin-bottom: 0.1504vw;">异常</div>
            <div>
              <span class="num">{{ this.echartData.unUseCount }}</span
              >个
            </div>
          </div>
        </div>
      </div>
      <div class="charts">
        <div id="L2Chart"></div>
      </div>
    </div>
  </div>
</template>

<script>
import moduleTitle from '@/components/moduleTitle'

export default {
  name: 'SdssJddsZhgjWebRightThree',
  components: {
    moduleTitle
  },
  props: {
    propsthree: Object
  },
  data() {
    return {
      title: '服务监控',
      isShow: false,
      myecharts: null,
      sumVal: '',
      echartData: {},
      list: []
    }
  },
  watch: {
    propsthree: {
      immediate: true,
      deep: true,
      handler: function (newarr, olbarr) {
        if (newarr) {
          console.log(newarr, '1111111111111111111111111')
          this.isShow = true
          this.echartData = newarr.count
          this.sumVal =
            this.echartData.unUseCount + 1 + this.echartData.apiCount
          this.list = [
            { name: '第三方服务', value: this.echartData.unUseCount },
            { name: '空间服务', value: 1 },
            { name: 'API服务', value: this.echartData.apiCount }
          ]
          this.echartsInit()
        }
      }
    }
  },
  mounted() {
    // this.getgjAreaStatistics()
    this.echartsInit()
    window.addEventListener('resize', () => {
      this.myecharts.resize() // 窗口发生改变就更新echarts
    })
  },
  beforeDestroy() {
    this.myecharts.dispose()
    window.removeEventListener('resize', this.myecharts)
  },

  methods: {
    echartsInit() {
      if (this.myecharts) {
        this.myecharts.dispose()
      }
      this.myecharts = this.$echarts.init(document.getElementById('L2Chart'))

      let colorList = ['#57ff90', '#ffba00', '#3bf4fe']

      // 公用调整
      let itemStyle = {
        borderColor: '#0f404e',
        borderWidth: 3,
        color: function (params) {
          return colorList[params.dataIndex]
        }
      }

      const option = {
        // backgroundColor: '#000',
        tooltip: {
          trigger: 'item'
        },

        title: {
          text: `{a|${this.sumVal}个}\n{b|服务总数}`,
          x: 'center',
          y: 'center',
          textStyle: {
            rich: {
              a: {
                color: '#FFFFFF',
                fontSize: '20',
                fontWeight: '600',
                fontFamily: 'Source Han Sans SC'
              },
              b: {
                fontSize: '14',
                fontFamily: 'Source Han Sans SC',
                color: '#FFFFFF',
                padding: [10, 0, 0, 5]
              }
            }
          }
        },
        legend: {
          show: true, // 显示图例，这是默认值
          type: 'plain',
          orient: 'vertical',
          width: 'auto',

          height: 200,
          itemWidth: 12,
          itemHeight: 10,
          right: 20,
          top: 55,
          bottom: 0,
          icon: 'circle',
          pageButtonItemGap: 10,
          pageButtonGap: 10,
          pageIconColor: '#fff',
          pageIconSize: [12, 12],
          pageTextStyle: {
            color: '#fff'
          },
          animationDurationUpdate: 500,
          textStyle: {
            fontSize: 15,
            height: 25,
            lineHeight: 25,
            color: '#fff',
            width: 100
            // backgroundColor: ' #0d606c'
            // overflow: 'break'
          },
          formatter: function (name) {
            let data = option.series[0].data
            let total = 0
            let tarValue
            for (var i = 0; i < data.length; i++) {
              total += data[i].value
              if (data[i].name == name) {
                tarValue = data[i].value
              }
            }
            var v = tarValue
            var p = Math.round((tarValue / total) * 100)
            if (name) {
              return `${name} ${v}`
            } else return ''
          }
        },
        series: [
          {
            // 数据
            type: 'pie',
            zlevel: 3,
            radius: ['45%', '60%'],
            center: ['50%', '50%'],
            itemStyle: itemStyle,
            emphasis: {
              //5.x版本使用悬浮放大
              scale: true,
              label: {
                show: true
              }
            },
            label: {
              show: false,
              position: 'outside',
              margin: 10,
              fontFamily: 'Adobe Heiti Std',
              color: '#fff',
              fontSize: '14',
              // backgroundColor: '#0a2a33',
              // borderWidth: '2',
              // borderColor: '#0a2a33',
              formatter: function (data) {
                return data.name + +data.percent.toFixed(0) + '%'
              }
            },
            labelLine: {
              show: false,
              length: 3,
              length2: 3
            },
            // title: {
            //   show: true,
            //   color: '#fff',
            //   fontStyle: 'normal',
            //   fontWeight: 'normal',
            //   fontFamily: '微软雅黑',
            //   fontSize: 20
            // },
            data: this.list
          },

          {
            name: '',
            type: 'pie',
            radius: ['46%', '52%'],
            center: ['50%', '50%'],
            tooltip: {
              show: false
            },
            legend: {
              show: false
            },
            itemStyle: {
              color: 'rgba(15, 64, 78, 0.6)'
            },
            emphasis: {
              scale: false
            },
            zlevel: 4,
            labelLine: {
              show: false
            },
            data: [100]
          },
          //内部仿球形
          {
            name: '',
            type: 'pie',
            startAngle: 90,
            radius: '42%',
            animation: false,
            center: ['50%', '50%'],
            emphasis: {
              scale: false
            },
            legend: {
              show: false
            },
            itemStyle: {
              labelLine: {
                show: false
              },
              color: new this.$echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                {
                  offset: 1,
                  color: 'rgba(50,171,241, 0)'
                },
                {
                  offset: 0.5,
                  color: 'rgba(50,171,241, .4)'
                },
                {
                  offset: 0,
                  color: 'rgba(55,70,130, 0)'
                }
              ]),
              shadowBlur: 60
            },
            data: [
              {
                value: this.sumVal
              }
            ]
          }
        ]
      }

      option && this.myecharts.setOption(option)
      this.myecharts.resize()
    }
    //获取数据
    // getgjAreaStatistics() {
    //   setTimeout(() => {
    //     console.log(this.echartData, '--->>this.echartData')
    //   }, 10)
    // }
  }
}
</script>

<style lang="scss" scoped>
.rightThree {
  width: 100%;
  height: 30%;
  // background-color: purple;
}
.two-echarts {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  margin-top: -1.9259vh;
}
.left {
  margin-left: 1.4229vw;
}
.leftImg {
  position: relative;
  width: 5.3125vw;
  height: 5.3556vh;
  img {
    width: 100%;
    height: 100%;
  }
}
.text {
  position: absolute;
  left: 20%;
  top: 10%;
  font-size: 0.7292vw;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
}
.num {
  font-size: 0.9375vw;
  font-family: DINPro;
  font-weight: 500;
  color: #ffffff;
}
.charts {
  position: relative;
  width: 13.0208vw;
  height: 23.1481vh;
}
#L2Chart {
  position: absolute;
  height: 100%;
  width: 200%;
  top: 0;
  left: -70%;
  z-index: 9999;
}
</style>
